<template>
  <div ref="box" id="box"></div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";

export default {
  name: "",
  data() {
    return {
        myChart:null
    };
  },
  props:['kData'],
  mounted() {
    console.log(this.kData,1111)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.box);
    // 绘制图表
    myChart.setOption({
      // 标题
      title: {
        text: "k线图",
        subtext: "副标题",
      },
      // 提示框组件,悬停的时候出来的小框
      tooltip: {},
      xAxis: {
        data: this.kData.x,
      },
      yAxis: {},
      // 图表样式
      series: [
        {
          name: "销量",
          type: "candlestick",
          data: this.kData.val,
        },
      ],
      // 工具栏
      toolbox: {
        feature: {
          saveAsImage: { // 保存图片
            name: "K线图",
            type: "jpg",
          },
          restore: {}, //重置/刷新
          dataView: {}, //数据视图
          dataZoom: {}, //区域放大
          magicType: { //动态类型切换
            type: ["line", "bar", "stack"]
          }
        }
      }
    })
  },
};
</script>

<style scoped lang="scss">
#box{
    width: 500px;
    height: 500px;
}
</style>